
/**
 * @Author: liu.yang
 * @Date: 2018-08-14 12:03:10
 */
import React, { Component } from "react";
import { connect } from "dva";
// import { equals } from "@cbd/utils"; // 暂时不考虑 alias，如果有需求，可以联系作者
import { Button, Divider } from 'antd';
// import html2canvas from 'html2canvas';
import styles from "./index.less";

import Demo from "./components/Demo";
import Todo from "./components/Todo";
import Async from "./components/Async";
import TableList from '../../components/tablelist/TableList'
import Catalogue from '../../components/catalogue/Catalogue.jsx'

const ButtonGroup = Button.Group;

const dataSource = [{
  key: '1',
  title: 'API发布流程',
  name: '胡彦斌胡彦祖',
  age: 22,
  time: '2017-07-05  13:34:23',
  address: '西湖区湖底公园1号',
}, {
  key: '2',
  title: 'API发布流程',
  name: '胡彦斌胡彦祖',
  age: 32,
  time: '2017-07-05  13:34:23',
  address: '西湖区湖底公园1号',
}, {
  key: '3',
  title: 'API发布流程',
  name: '胡彦祖',
  time: '2017-07-05  13:34:23',
  age: 42,
  address: '西湖区湖底公园1号公园2s号',
}];

@connect(({ demo }) => ({ demoData: demo }))
class DemoPage extends Component {

  state = {
    canvases: [],
  }


  // componentDidMount(){
  //   console.log("123")
  // }


  // componentDidUpdate() {
  //   console.log("223")
  // }

  // shouldComponentUpdate(nextProps) {
  //   const { demoData } = this.props;
  //   return !equals(nextProps.demoData, demoData);
  // }

  columns = [{
    title: 'title',
    dataIndex: 'title',
    key: 'title',
  }, {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  }, {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  }, {
    title: '创建时间',
    dataIndex: 'time',
    key: 'age',
  }, {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
    render: (text, record) => {
      return <span onClick={() => { this.handleClick(record) }}>{text}</span>
    },
  }, {
    title: '操作',
    dataIndex: 'opration',
    render: (text, record) => {
      return (
        <div>
          <a onClick={(e) => { e.preventDefault(); this.handleClick(record) }}>详情</a>
          <Divider type="vertical" />
          <a onClick={(e) => { e.preventDefault(); this.handleClick(record) }}>流程图</a>
          <Divider type="vertical" />
          <a onClick={(e) => { e.preventDefault(); this.handleClick(record) }}>删除</a>
        </div>
      );
    },
  }]

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: "demo/clearData" });
  }

  // camera = () => {
  //   html2canvas(document.body).then((canvas) => {
  //     const { canvases } = this.state
  //     // document.body.appendChild(canvas);
  //     // console.log(canvas.toDataURL())
  //     canvases.push(canvas.toDataURL())
  //     this.setState({
  //       canvases,
  //     })
  //   });
  // }

  // button=(e)=>{
  //   console.log(e.target.value)
  //   console.log(e.target)
  //   console.log(e.target.children[0].innerHTML)
  // }

  handleClick = record => {
    this.record = record;
  }

  handlePageChange = (current, pageSize) => {
    this.pageinfo = { current, pageSize }
  }

  render() {
    const { dispatch, demoData } = this.props;
    const { canvases } = this.state
    const CatalogueData = [
      {
        name: "流程管理",
        id: "flowManage",
        business: [
          {
            name: "流程配置",
            id: "flowConfigure",
          },
          {
            name: "表单配置",
            id: "formConfigure",
          },
          {
            name: "模型事件查看",
            id: "eventConfigure",
          },
        ],
      },
      {
        name: "流程执行",
        id: "flowImplement",
      },
    ];
    // console.log(canvases)
    return (
      <div className={styles.root}>
        <div className={styles.demo}>
          <Demo
            title="redux基础使用"
            info="本项目中的redux是使用的一个封装库-dva，简化了传统redux使用过于复杂的问题"
          >
            <Todo todoList={demoData.todoList} dispatch={dispatch} />
          </Demo>
        </div>
        <Demo title="Mobx 异步">
          <Async
            dispatch={dispatch}
            hasFetch={demoData.hasFetch}
            fetchLog={demoData.fetchLog}
          />
        </Demo>
        <Button type="primary" onClick={this.camera}>截图</Button>
        {canvases.map((item, index) => (
          <img src={item} alt={index} style={{ height: 100, width: 100 }} />
        ))}
        {/* <canvas width="2966" height="1404" style={{width: 1483, height: 702}} />
        {canvas} */}
        <ButtonGroup onClick={this.button}>
          <Button value="123">L</Button>
          <Button>M</Button>
          <Button>R</Button>
        </ButtonGroup>
        <Divider />
        <h1>列表组件使用</h1>
        <TableList
          dataSource={dataSource} // 数据源
          loading={false}
          columns={this.columns} // 列表的columns
          titleName='title'  // 作为title的字段---对应columns中dataIndex的值
          operationName='opration'  // 作为右上角显示的字段 ---对应columns中dataIndex的值
          onPageChange={this.handlePageChange} // 页码或页数改变
          rowKey='key'
          pagination={{
            showQuickJumper: true,
            showSizeChanger: true,
            showTotal: (total) => {
              return `总共${total}条记录`
            },
            // current: 1,
            // pageSize: 20,
            total: 30,
          }}
        />
        <h1>树状目录</h1>
        <Catalogue
          CatalogueData={CatalogueData} // 传入treeNodeSelect(selectedKeys, e) e.node.props.isLeaf 可以判断是否为叶子节点
        />
      </div>
    );
  }
}

export default DemoPage;
